<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
      <headerNav></headerNav>
      <transition :name="pagetransition">
        <router-view v-if="isRouterAlive" />
      </transition>
    </div>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import headerNav from '@/components/header';

export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true,
      pagetransition: 'slide-bottom'
    };
  },
  watch: {
    $route(to, from) {
      let isBack = this.$router.isBack;
      if (isBack) {
        this.pagetransition = 'slide-bottom';
      } else {
        this.pagetransition = 'slide-left';
      }
      this.$router.isBack = false;
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    }
  },
  components: {
    headerNav
  }
};
</script>

<style>
.slide-left-enter,
.slide-bottom-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-to,
.slide-bottom-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: 0.5s;
  position: absolute;
  top: 90px;
}
body {
  padding: 0;
  margin: 0;
  -ms-overflow-style: none;
  min-width: 1366px;
  background-color: #faf9ff;
}
body::-webkit-scrollbar {
  display: none;
}
html {
  overflow: -moz-hidden-unscrollable;
  height: 100%;
}
.tagChangeBox1 {
  display: none;
}
#app {
  padding: 0;
  margin: 0;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  color: #ffffff;
  text-decoration: none;
}
/*正常的未被访问过的链接*/
a:link {
  text-decoration: none;
  cursor: pointer;
}
/*已经访问过的链接*/
a:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
a:hover {
  text-decoration: none;
  cursor: pointer;
}
/* 正在点击的链接*/
a:active {
  text-decoration: none;
  cursor: pointer;
}
button {
  border: 0;
  background-color: transparent;
  outline: none;
}
/*
/* // 修改滚动条样式 */
::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
  max-height: 10px;
}

/* 滚动槽的轨道 */
::-webkit-scrollbar-track {
  border-radius: 30px;
}

/* 滚动条的小滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #2fc0e0;
  /* background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%); */
}
/* 修改input框placeholder颜色 */
input::-webkit-input-placeholder {
  color: rgb(191, 196, 204);
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(191, 196, 204);
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgb(191, 196, 204);
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(191, 196, 204);
}
</style>
<style lang ="less" scoped>
/* 使用no加注释取消rem转换 */
</style>
